
<script setup>
import { useRouter} from 'vue-router'
import {Back} from '@element-plus/icons-vue'
import { addEmployee, queryEmployeeById , updateEmployee} from '@/api/employee.js'
import { ref ,onMounted} from 'vue';


const router = useRouter()//用于获取路由实例，可以使用这个实例来进行导航或者访问路由的一些其他属性和方法。
//const route = useRouter().currentRoute//通过 route 变量可以访问当前路由的一些属性，例如路由参数、路径、元数据等。
const formRef = ref()

const optType = ref('')
 

const ruleForm = ref({  
        name: '',
        username: '', 
        sex: '1',
        phone: '',
        idNumber: ''
})

const rules = {
  name: [
            { required: true, message: '请输入员工姓名', trigger: 'blur' }
        ],
  username: [
            { required: true, message: '请输入员工账号', trigger: 'blur' }
        ],
  phone: [
          { required: true, trigger: 'blur',validator: (rule,value,callback) => {
              if(value === '' || (!/^1(3|4|5|6|7|8)\d{9}$/.test(value))){
                callback(new Error('请输入正确的手机号！'))
              }else{
                callback()
              }
            } 
          }
        ],
  idNumber: [
          { required: true, trigger: 'blur',validator: (rule,value,callback) => {
              if(value === '' || (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(X|x)$)/.test(value))){
                callback(new Error('请输入正确的身份证号！'))
              }else{
                callback()
              }
            } 
          }
        ] 
}

onMounted( async ()=>{
  optType.value = router.currentRoute.value.query.id ? 'update' : 'add'
  if(optType.value === 'update'){ 
    //数据回显
    const res = await queryEmployeeById(router.currentRoute.value.query.id)
    ruleForm.value = res.data.data
  }
  
})


const submitForm = async (formName, isContinue) => {
  const valid = await formRef.value.validate();
  if (valid) {
    // console.log('表单验证通过');
    // console.log(ruleForm.value); // 提交表单数据

    if (optType.value === 'add') { //新增操作
      
        const res = await addEmployee(ruleForm.value);
        if (res.data.code === 1) {
          ElMessage.success('员工添加成功！');
          if (isContinue) {
            ruleForm.value = {
              name: '',
              username: '',
              sex: '1',
              phone: '',
              idNumber: ''
            };
          } else {
            router.push('/employee');
          }
        } 
      
    } else {
      // 如果是更新员工，可以在这里执行更新操作
      const res = await updateEmployee(ruleForm.value)
      if(res.data.code === 1){
        ElMessage.success("员工信息修改成功！")
        router.push('/employee')
      }
    }
  } else {
    console.log('表单验证不通过');
    return false;
  }
};

</script>

<template>
  <div class="addBrand-container">
    <div style="display: flex; align-items: center;">
      <el-icon style="margin-right: 10px; margin-bottom: 20px">
        <Back />
      </el-icon>
      <el-button type="text"  @click="() => router.push('/employee')" 
        style="margin-bottom: 20px;">返回
      </el-button>
      
    </div>
    <div class="container">
      
      <el-form :model="ruleForm"  ref="formRef" :rules="rules" label-width="180px">
        <el-form-item label="账号" prop="username">
          <el-input v-model="ruleForm.username" ></el-input>
        </el-form-item>
        <el-form-item label="员工姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="ruleForm.sex" >
            <el-radio  label="1">男</el-radio>
            <el-radio  label="2">女</el-radio>
           </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNumber">
          <el-input v-model="ruleForm.idNumber"></el-input>
        </el-form-item>
        <div class="subBox">
          <el-button type="primary" @click="submitForm('ruleForm',false)">保存</el-button>
          <el-button 
            v-if="optType === 'add'" 
            type="primary" 
            @click="submitForm('ruleForm',true)">保存并继续添加员工
          </el-button>
          <el-button @click="() => router.push('/employee')">返回</el-button>
        </div>
      </el-form>
    </div>
  </div>
  
</template>


<style lang="scss" scoped>
.addBrand {
  &-container {
    margin: 10px;
    margin-top: 10px;
    .HeadLable {
      background-color: transparent;
      margin-bottom: 0px;
      padding-left: 0px;
    }
    .container {
      position: relative;
      z-index: 1;
      background: #fff;
      padding: 30px;
      border-radius: 4px;
      // min-height: 500px;
      .subBox {
        padding-top: 30px;
        text-align: center;
        
      }
    }
    .idNumber {
      margin-bottom: 39px;
    }

    .el-form-item {
      margin-bottom: 29px;
    }
    .el-input {
      width: 293px;
    }
  }
}
</style>
